<template>	<div>		<div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);height: 60px;line-height: 60px;">			<div style="float: left; font-size: 30px; width: 60px; text-align: center; border-right: 2px solid #DCDDE0;">				<i class="el-icon-search"></i>			</div>			<font color="#72767B" style="margin-left: 20px;">筛选查询</font>
			<div style="float: right; width: auto;">
				<font color="#72767B" style="margin-left: 20px;">模糊条件</font>
				<div style="float: right; margin-right: 30px;">
					<el-button type="primary" @click.pervent="getusers()">查询</el-button>
				</div>
				<div style="float: right; width: auto;margin-right: 20px; margin-left: 20px;">
					<el-input v-model="pageuser.userName" placeholder="请输入姓名进行模糊查询!"></el-input>
				</div>
			</div>
			<div style="float: right; width: auto; margin-right: 20px;">
				<font color="#72767B" style="margin-right: 20px;">管理类别</font>
				<!-- <el-select clearable size='mini' v-model="pageuser.userState" placeholder="" autocomplete="off">
				  <el-option v-for="(item,index) in stateList" :label="item" :value =""></el-option>
				</el-select> -->
				<el-select size='mini' v-model="pageuser.userState" placeholder="请选择" @change="getusers()" autocomplete="off">
				<el-option v-for="n in selectby" :label="n.text" :value="n.value"></el-option>
				</el-select>
			</div>		</div>				<div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);height: 60px;line-height: 60px; margin-top: 20px;">			<div style="float: left; font-size: 30px; width: 60px; text-align: center; border-right: 2px solid #DCDDE0;">				<i class="el-icon-s-grid"></i>			</div>			<font color="#72767B" style="margin-left: 20px;">数据列表</font>			<div style="float: right; margin-right: 30px;">				<el-button type="info" @click="delusers()">删除</el-button>			</div>			<div style="float: right; margin-right: 30px;">				<el-button type="info" @click="pd();dialogFormVisible2=true">修改</el-button>			</div>			<div style="float: right; margin-right: 30px;">				<el-button type="info" @click="dialogFormVisible=true">新增</el-button>			</div>			<div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);margin-top: 4px;">				<el-table height="600px" :data="users" border style="width: 1800" @select="getselect">
					<el-table-column  align="center" type="selection" width="150" ></el-table-column>					<el-table-column align="center" prop="userId" label="ID" width="260"></el-table-column>					<el-table-column align="center" prop="userName" label="姓名" width="370"></el-table-column>					<el-table-column align="center" prop="userPhone" label="手机号" width="680"></el-table-column>					<el-table-column align="center" prop="userState" label="管理类别" :formatter="userStateformat" width="360"></el-table-column>
					<el-table-column align="" prop="" label="" width="0px">
					<template slot-scope="scope">
					<el-dialog title="新增管理" :visible.sync="dialogFormVisible">
						<el-form>
						  <el-form-item label="管理人姓名" :label-width="300">
						    <el-input type="text" v-model="adduser.userName"></el-input>
						  </el-form-item>
						  <el-form-item label="手机号" :label-width="300">
						    <el-input type="text" v-model="adduser.userPhone"></el-input>
						  </el-form-item>
						  <el-form-item label="密码" :label-width="300">
						    <el-input type="text" v-model="adduser.userPassword"></el-input>
						  </el-form-item>
						  <el-form-item label="管理类别"  :label-width="300">
						   <el-select size='mini' v-model="adduser.userState" placeholder="请选择" @change="getusers()" autocomplete="off">
						   <el-option v-for="n in selectby" :label="n.text" :value="n.value"></el-option>
						   </el-select>
						  </el-form-item>
						 <el-form-item label="头像" :label-width="300">
						  <el-upload class="upload-demo" action="http://localhost/primary-category/upload" :on-success="uploadsuccess" :file-list="fileList" list-type="picture">
						     <el-button size="small" type="primary">点击上传</el-button>
						     <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
						   </el-upload>
						   				<!-- <el-upload class="upload-demo" action="http://localhost/primary-category/upload"
						   					:on-success="uploadsuccess" :file-list="fileList" list-type="picture">
						   					<el-button size="small" type="primary">点击上传</el-button>
						   					<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
						   				</el-upload> -->
						  </el-form-item>
						  
						</el-form>
					    <div slot="footer" class="dialog-footer">
					    <el-button @click="dialogFormVisible = false">取 消</el-button>
					    <el-button type="primary" @click="addusers();dialogFormVisible = false">确 定</el-button>
					  </div>
					</el-dialog>
					<el-dialog title="修改管理" :visible.sync="dialogFormVisible2">
						<el-form>
						  <el-form-item label="管理人姓名" :label-width="300">
						    <el-input type="text" v-model="updateusers.userName"></el-input>
						  </el-form-item>
						  <el-form-item label="手机号" :label-width="300">
						    <el-input type="text" v-model="updateusers.userPhone"></el-input>
						  </el-form-item>
						  <el-form-item label="密码" :label-width="300">
						    <el-input type="text" v-model="updateusers.userPassword"></el-input>
						  </el-form-item>
						  <el-form-item label="管理类别"  :label-width="300">
						   <el-select size='mini' v-model="updateusers.userState" placeholder="请选择" @change="getusers()" autocomplete="off">
						   <el-option v-for="n in selectby" :label="n.text" :value="n.value"></el-option>
						   </el-select>
						  </el-form-item>
						  <el-form-item label="头像" :label-width="300">
						  <el-upload class="upload-demo" action="http://localhost/primary-category/upload" :on-success="updateuploadsuccess" :file-list="fileList" list-type="picture">
						     <el-button size="small" type="primary">点击上传</el-button>
						     <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
						   </el-upload>
						   				<!-- <el-upload class="upload-demo" action="http://localhost/primary-category/upload"
						   					:on-success="uploadsuccess" :file-list="fileList" list-type="picture">
						   					<el-button size="small" type="primary">点击上传</el-button>
						   					<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
						   				</el-upload> -->
						  </el-form-item>
						  
						</el-form>
					    <div slot="footer" class="dialog-footer">
					    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
					    <el-button type="primary" @click="updateuser();dialogFormVisible2 = false">确 定</el-button>
					  </div>
					</el-dialog>
				</template>
				</el-table-column>				  </el-table>			</div>			<div style="text-align: center;">				<el-pagination :page-count="allPages" @current-change="changPage" 				:current-page="pageuser.indexPage"  background layout="prev, pager, next"></el-pagination>			</div>					</div>	</div></template><script>	export default {		name: 'Category',		data() {			return {
				//新增管理
				dialogFormVisible:false,
				dialogFormVisible2:false,				input: null,
				dlist:[],
				//用户
				users:[],
				//分页查询
				pageuser: {
					indexPage: 1,
					pageSize: 4,
					userName: null,
					userState:null
				},
				allPages: null,
				total: null,
				//分页查询下拉菜单
				selectby: [
					{value:null,text:'全部'},
					{value:'0',text:'超级管理'},
					{value:'1',text:'门店管理'},
					{value:'2',text:'仓库管理'}
				],
				
				//添加
				adduser:{
					userName:null,
					userPhone:null,
					userPassword:null,
					userPhotoUrl:null,
					userState:null
				},
				
				//修改
				updateusers:{
					userId:null,
					userName:null,
					userPhone:null,
					userPassword:null,
					userPhotoUrl:null,
					userState:null
					
				},
				//上传
				fileList: {
					name: null,
					url:null }
							}		},		methods: {
			//上传成功
			uploadsuccess(response,file,fileList){
				this.adduser.userPhotoUrl=response.data;
				this.fileList.name=File.name;
				this.fileList.url=response.data;
				// this.$message({
				// 	message: '上传成功',
				// 	type: 'success'
				// });
			
			},
			//修改上传成功
			updateuploadsuccess(response,file,fileList){
				this.updateusers.userPhotoUrl=response.data;
				this.fileList.name=File.name;
				this.fileList.url=response.data;
				// this.$message({
				// 	message: '上传成功',
				// 	type: 'success'
				// });
				
			},
						changPage(index) {
				this.pageuser.indexPage=index;
				this.getusers();							},
			//获取用户
			getusers(){
				this.$http.post("/user/getusers",this.pageuser)
					.then((resp) => {
						this.users= resp.data.data.users;
						this.allPages=resp.data.data.allPages;
						this.total=resp.data.data.total;
						this.pageuser.indexPage=resp.data.data.indexPage;
					}).catch(function(error) {
						console.log(error);
					})	
			},
			//修改渠道商
			updateuser(){
					this.updateusers.userId=this.dlist[0];
					this.$http.post("/user/updateuser",this.updateusers)
						.then((resp) => {
							if(resp.data.code==200){
								this.$message({
									message: resp.data.message,
									type: 'success'
								});
								this.getusers();
								this.updateusers.userId=null;
								this.updateusers.userName=null;
								this.updateusers.userPhone=null;
								this.updateusers.userState=null;
								this.updateusers.userPassword=null;
							}else{
								this.$message({
									message: resp.data.message,
									type: 'warning'
								});
							}
						}).catch(function(error) {
							console.log(error);
						})
				
			},
			delusers(){
				this.$http.post("/user/delusers",this.dlist)
					.then((resp) => {
						if(resp.data.code==200){
							this.$message({
								message: resp.data.message,
								type: 'success'
							});
							this.getusers();
						}else{
							this.$message({
								message: resp.data.message,
								type: 'warning'
							});
						}
					}).catch(function(error) {
						console.log(error);
					})
				
			},
			//新增用户
			addusers(){
				this.$http.post("/user/adduser",this.adduser)
					.then((resp) => {
						if(resp.data.code==200){
							this.$message({
								message: resp.data.message,
								type: 'success'
							});
							this.adduser.userId=null;
							this.adduser.userName=null;
							this.adduser.userPhone=null;
							this.adduser.userState=null;
							this.adduser.userPassword=null;
							this.getusers();
						}else{
							this.$message({
								message: resp.data.message,
								type: 'warning'
							});
							this.adduser.userId=null;
							this.adduser.userName=null;
							this.adduser.userPhone=null;
							this.adduser.userState=null;
							this.adduser.userPassword=null;
						}
					}).catch(function(error) {
						console.log(error);
					})	
				
			},
			userStateformat(row){
				if(row.userState=='0'){
					return "超级管理员";
				}else if(row.userState=='1'){
					return "门店管理员"
				}else{
					return "仓库管理员"
				}
			},
			pd(){
				if(this.dlist.length==0){
					this.$message({
						message: '请选择一个修改！',
						type: 'warning'
					});
					dialogFormVisible2=false;
				}
				if(this.dlist.length>1){
					this.$message({
						message: '只能同时修改一个！',
						type: 'warning'
					});
					dialogFormVisible2=false;	
				}
			},
			getselect(list,row){
				this.dlist=[];
				for(let n of list){
					this.dlist.push(n.userId);
				}
			}
			//头像上传成功调用方法
					},
		created() {
			this.getusers();
			
		}	}</script><style>
	</style>